<template>
	<gracePage headerBG="#FFFFFF" statusBarBG="#EB5D4B" :customHeader="false">

		<view slot="gBody" class="grace-body" style="padding-bottom: 120rpx;">
			<view style="height:38rpx;"></view>
			<!-- 购物车主结构  -->
			<view class="grace-list" style="background-color: #FFFFFF;margin-bottom: 20rpx;border-radius: 8rpx;">
				<view class="grace-list-items" @tap="goaddresslist" style="min-height: 128rpx;">
					<view class="grace-list-body" v-if="addressData.name">
						<view class="grace-list-title">
							<text class="grace-list-title-text">{{addressData.name}}</text>
							<text class="grace-list-title-desc">{{addressData.phone}}</text>
						</view>
						<view class="grace-list-body-desc">{{addressData.province}}{{addressData.city}}{{addressData.district}}{{addressData.address}}</view>
					</view>
					<view class="grace-list-body" v-if="!addressData.name">
						<view class="grace-list-title">
							<text class="grace-list-title-text" style="color: #999999;">请选择地址</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
			<view class="grace-shoppingcard" v-for="(goods, index) in shoppingCard" :key="index">
				<view class="grace-shoppingcard-goods">
					<image :src="gRequest.apiUrlImages+goods.image" style="width: 180rpx;height: 180rpx;" class="grace-shoppingcard-goods-image"
					 mode="scaleToFill"></image>
					<view class="grace-shoppingcard-goods-body">
						<view class="grace-shoppingcard-goods-title">{{ goods.name}}</view>
						<view class="grace-space-between">
							<text class="grace-shoppingcard-goods-price">￥{{ goods.price }}</text>
							<view class="grace-shoppingcard-goods-number">
								x{{goods.quantity}}
							</view>
						</view>
					</view>
				</view>
				<view style="height:25rpx;"></view>
			</view>
			<view class="morelist" style="border-bottom:none">
				<view class="title">
					<text class="quan" :style="'background:' + colors">券</text>
					<text>优惠券</text>
				</view>
				<view class="right_title" :style="'color:' + colors + ';font-size:24upx'" @tap="openCoupon">
					{{current_coupon?`-${current_coupon.disprice}`:'请选择优惠券'}}
				</view>
			</view>
			<view class="paylist clearfix" style="background-color: #FFFFFF;border-radius: 8rpx;">
				<view class="grace-flex grace-rows grace-flex-vcenter grace-border-b" style="height: 90rpx;padding-left: 10rpx;"
				 @tap="payChange('wxpay')" v-if="payList.wxpay">
					<view class="iconfont icon-weixinzhifu" style="color: #3FCF77;font-size: 60rpx;"></view>
					<view style="color: #666666;font-size: 28rpx;margin-left: 10rpx;">微信支付</view>
					<view class="iconfont icon-xuanzhong" v-if="payment_method=='wxpay'" style="color:#FD815F;margin-left: auto;font-size: 40rpx;margin-right: 20rpx;"></view>
				</view>
				<view class="grace-flex grace-rows grace-flex-vcenter grace-border-b" style="height: 90rpx;padding-left: 10rpx;"
				 @tap="payChange('alipay')" v-if="payList.alipay">
					<view class="iconfont icon-zhifubaozhifu" style="color: #02A9F1;font-size: 60rpx;"></view>
					<view style="color: #666666;font-size: 28rpx;margin-left: 10rpx;">支付宝</view>
					<view class="iconfont icon-xuanzhong" v-if="payment_method=='alipay'" style="color:#FD815F;margin-left: auto;font-size: 40rpx;margin-right: 20rpx;"></view>
				</view>
				<view class="grace-flex grace-rows grace-flex-vcenter" style="height: 90rpx;padding-left: 10rpx;" @tap="payChange('charge')">
					<view class="iconfont icon-yue" style="color: #FD815F;font-size: 60rpx;"></view>
					<view style="color: #666666;font-size: 28rpx;margin-left: 10rpx;">余额({{memberinfo.recharge}})</view>
					<view class="iconfont icon-xuanzhong" v-if="payment_method=='charge'" style="color:#FD815F;margin-left: auto;font-size: 40rpx;margin-right: 20rpx;"></view>
				</view>
			</view>
			<!-- 优惠券弹出层 -->
			<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
			<view class="coupon" :style="'bottom:' + (couponshow == true ? '0':'')">
				<view class="buyong" @click="notUsed()">不使用优惠券</view>
				<scroll-view class="scrolls" scroll-y>
					<coupon :couponList="couponList" @onReceive="onReceive"></coupon>
				</scroll-view>
			</view>
		</view>
		<view slot="gBody" class="grace-nowrap grace-flex-vcenter grace-border-t" style="background-color:#FFFFFF;position: fixed;left: 0;bottom: 0;width: 100%;">
			<view class="grace-shoppingcard-count grace-nowrap grace-flex-vcenter" style="margin-left: 40rpx;">
				<text class="grace-text">总计 :</text>
				<text style="font-size:32rpx; color:#F00;">￥{{ totalprice }}</text>
			</view>
			<view class="grace-shoppingcard-checkout" style="background:linear-gradient(268deg,rgba(235,93,75,1),rgba(253,129,95,1));color: #FFFFFF;"
			 @tap="goPaySure">立即支付</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from '../../graceUI/components/gracePage.vue';
	import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
	import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
	import graceNumberBox from '../../graceUI/components/graceNumberBox.vue';
	import graceHeader from '../../graceUI/components/graceHeader.vue';
	import coupon from "./coupon";
	export default {
		data() {
			return {
				colors: "#333333",
				couponshow: false,
				// 总价
				totalprice: 0,
				// 选择文本
				selectText: '全选',
				// 购物车数据 可以来自 api 请求或本地数据
				shoppingCard: [],
				addressData: {},
				payment_method: "wxpay",
				couponList: [],
				couponData: {},
				payList:{
					
				},
				coupon_id:"",
				current_coupon:null,
				memberinfo:{}
			};
		},
		onLoad: function() {

		},

		onShow: function() {
			if (!uni.getStorageSync('userInfo')) {
				uni.navigateTo({
					url: '../login/login'
				});
			}
			uni.getStorage({
				key: 'currentAddress',
				success: (res) => {
					if (res.data) {
						this.addressData = JSON.parse(res.data)
					}
				}
			});
			uni.getStorage({
				key: 'orderList',
				success: (res) => {
					this.shoppingCard = JSON.parse(res.data)
					this.countTotoal();
				}
			});
			this.getCurrentAddress()
			this.getCoupon()
			this.getPayList()
			this.getMemberInfo()
		},
		methods: {
			getMemberInfo(){
				this.gRequest.get('/login/getmemberinfo', {
					member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id
				}, res => {
					this.setData({ memberinfo: res.data });
				});
			},
			goPaySure() {
				if(!this.addressData.address_id) {
					uni.showToast({
						title: '请选择地址',
						'icon': 'none'
					})
					return
				}
				this.gRequest.post("/orders/createorder", {
					member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
					total: this.totalprice,
					'prolist': JSON.stringify(this.shoppingCard),
					'is_jifen_order': "0",
					'addr_id': this.addressData.address_id,
					'shipfee': "0",
					'paymethod': this.payment_method,
					'coupon': this.coupon_id
				}, 'form', {}, res => {
					if (res.status == 1) {
						if(this.payment_method == "charge") {
							uni.showToast({
								title: '支付成功',
								'icon': 'none'
							})
							uni.redirectTo({ url: '../myorders/myorders' });
						}else {
							this.toPay(res.data.order_id)
						}
					}else {
						uni.showToast({ title: res.msg, icon:"none" });
					}
				});
			},
			toPay(order_id) {
				if (this.payment_method == 'wxpay') {
					console.log(JSON.parse(uni.getStorageSync("userInfo")).member_id,order_id)
					this.gRequest.post("/wxpay/goodsPayApi", {
						member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
						order_id: order_id
					}, 'form', {}, res => {
						console.log(res)
						if (res.status == 1) {
							uni.requestPayment({
								provider: "wxpay",
								orderInfo: res.data, //微信、支付宝订单数据
								success: (res) => {
									uni.showToast({
										title: '支付成功',
										'icon': 'none'
									})
									uni.redirectTo({ url: '../myorders/myorders' });
								},
								fail: (err) => {
									console.log(err)
									uni.showToast({
										title: '支付失败',
										'icon': 'none'
									})
								}
							})
						}else {
							uni.showToast({ title: res.msg, icon:"none" });
						}
					});
				} else if (this.payment_method == 'alipay') {
					this.gRequest.post("/alipay/toalipay", {
						member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
						order_id: order_id
					}, 'form', {}, res => {
						if (res.status == 1) {
							uni.requestPayment({
								provider: "alipay",
								orderInfo: res.data, //微信、支付宝订单数据
								success: (res) => {
									uni.showToast({
										title: '支付成功',
										'icon': 'none'
									})
									uni.redirectTo({ url: '../myorders/myorders' });
								},
								fail: (err) => {
									uni.showToast({
										title: '支付失败',
										'icon': 'none'
									})
								}
							})
						}else {
							uni.showToast({ title: res.msg, icon:"none" });
						}
					});
				} else {
					Toast("支付成功")
				}
			},
			getCoupon() {
				this.gRequest.post('/coupon/getRecommend', {
					member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
					total:this.totalprice
				}, 'form', {}, res => {
					if (res.status == 1) {
						this.couponList = res.data
					}
				});
			},
			exchangeTime(date) {
			  return date.replace(/\-/g, "/");
			},
			onReceive(item, index) { //选择优惠券
				if(item) {
					this.coupon_id = item.coupon_id
					this.setData({
						current_coupon:item
					})
					this.countTotoal()
					this.couponshow = false
				}
				
				/**
				 * 自定义变量 到goodsList中 用户计算合计金额与优惠券
				 */
				// this.goodsList[this.couponIndex].couponName = '满'+item.money+'减'+item.reduce
				// this.goodsList[this.couponIndex].couponReduce = item.reduce //优惠券金额
				// this.sumprice = this.sumprice - item.reduce
			},
			openCoupon(index) {
				this.setData({
					couponshow: true,
				});
			},
			hidecoupon() {
				this.setData({
					couponshow: false
				});
			},
			notUsed() { //不使用优惠券 重置金额
				this.couponshow = false
			},
			payChange(type) {
				this.payment_method = type;
			},
			getCurrentAddress() {
				this.gRequest.get('/orders/getaddressbymemberid', {
					member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id
				}, res => {
					if (res.data.length > 0) {
						this.setData({
							addressData: res.data[0]
						});
					}
				});
			},
			getPayList() {
				this.gRequest.get('/payinfo/getpaylist', {}, res => {
					this.payList = res.data
				});
			},
			goaddresslist() {
				uni.navigateTo({
					url: '../my/addressList?type=1'
				});
			},
			//计算总计函数
			countTotoal() {
				var total = 0;
				for (var i = 0; i < this.shoppingCard.length; i++) {
					if (this.shoppingCard[i].checked) {
						total += Number(this.shoppingCard[i].price) * Number(this.shoppingCard[i].quantity);
					}
				}
				if(this.current_coupon) {
					total -= Number(this.current_coupon.disprice)
				}
				this.totalprice = total.toFixed(2);
			},
			goback() {
				uni.navigateBack({});
			}
		},
		components: {
			gracePage,
			coupon
		}
	};
</script>
<style>
	page {
		background: #f8f8f8;
	}

	.empty-view {
		width: 280rpx;
		height: 280rpx;
		border-radius: 280rpx;
		background-color: #f6f7f8;
		margin-top: 30rpx;
	}

	.empty-img {
		width: 220rpx;
		height: 200rpx;
		margin: 40rpx;
		border-radius: 200rpx;
	}

	.grace-shoppingcard {
		background: #ffffff;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.grace-shopp-name {
		width: 500rpx;
	}

	.grace-shopp-go {
		width: 120rpx;
	}

	.grace-shoppingcard-goods {
		margin: 10rpx 0;
		display: flex;
		flex-wrap: nowrap;
	}

	.grace-shoppingcard-goods-checkbtn {
		width: 60rpx;
		flex-shrink: 0;
	}

	.grace-shoppingcard-goods-image {
		width: 120rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.grace-shoppingcard-goods-body {
		width: 100%;
	}

	.grace-shoppingcard-goods-title {
		line-height: 1.4em;
	}

	.grace-shoppingcard-goods-price {
		color: #f00;
		font-size: 32rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.grace-shoppingcard-goods-number {
		padding: 2px 0;
	}

	.grace-shoppingcard-remove {
		display: block;
		text-align: right;
		line-height: 50rpx;
		margin-top: 30rpx;
		color: #cccccc;
		font-size: 24rpx;
	}

	.grace-shoppingcard-checkbtn {
		width: 200rpx;
		margin-left: 50rpx;
		flex-shrink: 0;
	}

	.grace-shoppingcard-count {
		width: 600rpx;
	}

	.grace-shoppingcard-checkout {
		width: 280rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
		flex-shrink: 0;
	}

	.cart .grace-page-footer {
		position: relative;
	}

	/* 优惠券 */
	.coupon {
		background-color: #fff;
		border-radius: 10upx 10upx 0 0;
		position: fixed;
		left: 0;
		bottom: -1000upx;
		z-index: 150;
		transition: all 0.3s;
	}

	.coupon .buyong {
		line-height: 80upx;
		padding: 0 4%;
		text-align: right;
		color: #999;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 10;
		opacity: 0.7;
	}

	.scrolls {
		width: 100vw;
		height: 55vh;
		z-index: 500;
	}

	.morelist {
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1upx dashed #eee;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.morelist .title {
		color: #333;
		font-size: 26upx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.morelist .title .quan {
		font-size: 20upx;
		width: 35upx;
		height: 35upx;
		line-height: 36upx;
		text-align: center;
		border-radius: 8upx;
		margin-right: 10upx;
		align-items: center;
		color: #fff;
	}

	.morelist .right_title {
		color: #999;
	}
</style>
